<script lang="ts" setup>
  import { reactive, ref, computed, watch } from 'vue'
  // 数据
  let car = reactive({
    brand: '奔驰',
    price: 280000.00
  });

  // 方法
  function changeCar () {
    car.brand = "张三";
  }
  // 深度监视
  var stopWatch =
    watch([() => { return car.brand }], (nValue, oValue) => {
      console.log("新值=>", nValue, "旧值=>", oValue)
      if (nValue == '张三') {
        // 停止监听
        stopWatch();
      }
    }, {
      // watch的深度监视开关
      deep: true,
      // 立即监视（第一次打开页面就执行一次）
      immediate: false
      // 需要注意 当要监测的对象是一个深层次的且嵌套的对象 就需要指定 deep
    }
    )
</script>

<template>
  <div>
    <h2>一辆：{{car.brand}}车，价值{{car.price}}</h2>
  </div>
  <div>
    <button @click="changeCar()">修改车</button>
  </div>
</template>